﻿
@{
    ViewBag.Title = "专辑列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/styles/album.css" rel="stylesheet" />
<div id="app" v-cloak>
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="height:60px;line-height:60px;padding-left:40px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>专辑</el-breadcrumb-item>
            <el-breadcrumb-item><font style="font-weight:800">{{album.AlbumName}}</font></el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="content">
            <el-col :span="7" class="left">
                <img style="width:180px;height:180px;padding-top:20px;" :src="album.AlbumPic" onerror="showDefaultImg(this)"/>
                <h3>专辑介绍</h3>
                <br />
                <p>
                    发行时间: <font style="font-size:13px" v-if="album.AlbumTime!=''">{{album.AlbumTime}}</font>
                    <font style="font-size:13px" v-else>暂无数据</font>
                </p>
                <p>
                    专辑简介: <font style="font-size:13px"  v-if="album.AlbumDesc!=''">{{album.AlbumDesc}}</font>
                    <font style="font-size:13px" v-else>暂无数据</font>
                </p>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="16">
                <span><font style="font-size:28px;font-weight:700">歌曲列表</font> <font style="font-size:14px;padding-left:20px;">{{pagenation.totalCount}}首歌</font></span>
                <el-table :data="MusicLists" ref="MusicLists" stripe v-loading="dataLodaing">
                    <template slot="empty">
                        <p>{{dataText}}</p>
                    </template>
                    <el-table-column type="index" width="80" label="序号">
                    </el-table-column>
                    <el-table-column prop="Musics.MusicName" label="歌曲名" width="220" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="Singer.SingerName" label="歌手" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link :underline="false" @@click="singerLink(scope.row.Singer.SingerId)">{{scope.row.Singer.SingerName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Musics.MusicLong" label="时长"  show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="ListenMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-headset" style="font-size:18px;" title="试听"></i></el-button>
                            <el-button v-on:click="BuyMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-shopping-cart-2" style="font-size:18px;" title="选购"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-if="MusicLists.length != 0" class="typePage">
                    <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenation.totalCount" v-on:current-change="CurrentChange" :current-page="pagenation.currentPage" :page-size="30">
                    </el-pagination>
                </div>

            </el-col>
        </el-row>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                album: {
                    AlbumName: '',
                    AlbumPic: '',
                    AlbumId: '@ViewData["albumId"]',
                    AlbumDesc: '',
                    AlbumTime:'',
                },
                TableLabel: [
                    { prop: 'Musics.MusicName', label: '歌曲名', width: 220 },
                    { prop: 'Singer.SingerName', label: '歌手' },
                    { prop: 'Musics.MusicLong', label: '时长' },
                ],//表格信息的列的信息
                pagenation: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
                MusicLists: [
                ],
                dataLodaing: false,
                dataText: "",//进去页面先让字样为空
            }
        },
        mounted() {
            this.GetAlbumInfo();
            this.GetMusicLists();
        },
        methods: {
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.GetMusicLists();
            },//分页当前页改变
            GetAlbumInfo() {
                axios.post('/Album/GetAlbumInfo').then(res => {
                    this.album = res.data.data
                    console.log(this.album);
                })
            },
            GetMusicLists() {              
                axios.post('/Album/GetAlbumMusicLists', { 'CurrentPage': this.pagenation.currentPage, 'AlbumId': this.album.AlbumId }).then(res => {
                    this.MusicLists = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                    this.dataLodaing = false;
                    console.log(res.data);
                })
            },
            ListenMusic(row) {
                var info = JSON.parse(localStorage.getItem("ListenMusicLists")) || []
                if (info != []) {
                    if (info[0].MusicId != row.Musics.MusicId) {
                        let music = [{
                            'MusicId': row.Musics.MusicId,
                            'cover': '../musicImg/cover3.jpg',
                            'src': '../music/星弟 _ 小贱（谭冰尧） - 不想做朋友.mp3',
                            'title': row.Musics.MusicName + '-' + row.Singer.SingerName,
                        }]
                        localStorage.setItem('ListenMusicLists', JSON.stringify(music));
                        $(function () {
                            var setConfig = {
                                song: JSON.parse(localStorage.getItem('ListenMusicLists')),
                                error: function (meg) {
                                    console.log(meg);
                                }
                            };
                            var audioFn = audioPlay(setConfig);
                            if (audioFn) {
                                audioFn.loadFile(true);
                            }
                        });
                        this.$message({
                            message: '正在播放，请稍等...',
                            type: 'success'
                        });
                        axios.post('/Music/AddClickCount', { 'id': row.Musics.MusicId })
                    }
                }
            },
            BuyMusic(row) {
                var lists = localStorage.getItem('BuyLists')
                lists = lists ? JSON.parse(lists) : [];
                const buy = {
                    'id': row.Musics.MusicId,
                    'MusicName': row.Musics.MusicName,
                    'SingerName': row.Singer.SingerName,
                    'MusicLong': row.Musics.MusicLong,
                    'MusicBit': row.Musics.MusicBitRate,
                    'MusicAblum': row.Albums.AlbumName
                }
                let count = 0;
                if (lists.length > 0) {
                    for (var i = 0; i < lists.length; i++) {
                        if (row.Musics.MusicId == lists[i].id) {
                            count = count + 1;
                            this.$message.error('已经存在此歌曲!');
                            break;
                        }
                    }
                }
                if (count == 0) {
                    lists.push(buy);
                    this.$message({
                        message: '成功加入购物车',
                        type: 'success'
                    });
                }
                localStorage.setItem("BuyLists", JSON.stringify(lists));

            },
            singerLink(id) {
                window.open('/Music/SingerdetailInfo?id=' + id, "_blank");
            },
        },
        created() {
            this.dataLodaing = true;
        },
        watch: {
            //MusicLists: function () {
            //    this.$nextTick(function () {
            //        $(function () {
            //            function footerPosition() {
            //                $("footer").removeClass("fixed-bottom");
            //                //网页正文全文高度
            //                var contentHeight = document.body.scrollHeight,
            //                    //可视窗口高度，不包括浏览器顶部工具栏
            //                    winHeight = window.innerHeight;
            //                if (!(contentHeight > winHeight)) {
            //                    //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
            //                    $("footer").addClass("fixed-bottom");
            //                    $("footer").show();

            //                } else {
            //                    $("footer").removeClass("fixed-bottom");
            //                    $("footer").show();

            //                }
            //            }
            //            footerPosition();
            //            $(window).resize(footerPosition);
            //        });
            //    });
            //}
        }
    });
     // $(function () {
     //   $("footer").hide();
     //  })
    function showDefaultImg(img) {
        img.src = "../Content/1111.png";
        //不循环执行
        img.onerror = null;
    }
</script>

